<template>
	<view v-if="fun==1" class="page-container back-grey-light">
		<view class="back-white">
			<view class="col-box prow-l pcol-lg bor-b" style="padding-top: 32rpx;">
				<text class="bold mb-10">昵称</text>
				<u-input v-model="nickName" type="nickname" maxlength="10" placeholder="请填写昵称" placeholder-style="color: #999;font-size: 28rpx;" />
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-button-box">
			<view class="submit-button" :class="!nickName?'back-grey':'back-primary'" @click="submitHandle()">保存</view>
		</view>
	</view>
	<view v-else-if="fun==2" class="page-container back-grey-light">
		<view class="back-white">
			<view class="col-box prow-l pcol-lg bor-b" style="padding-top: 32rpx;">
				<text class="bold mb-10">手机号</text>
				<u-input v-model="phone" type="number" maxlength="11" placeholder="请填写手机号" placeholder-style="color: #999;font-size: 28rpx;" />
			</view>
			<view class="col-box prow-l pcol-lg" style="padding-top: 32rpx;">
				<text class="bold mb-10">验证码</text>
				<view class="row-box sb">
					<u-input v-model="smsCode" type="number" maxlength="6" placeholder="请填写验证码" placeholder-style="color: #999;font-size: 28rpx;" />
					<view v-if="!codeStatus" class="row-box center button-smscode" :class="phone?'back-primary':'back-grey'" @click="getSmscode()">
						<text class="white" style="font-size: 14px;">获取</text>
					</view>
					<view v-else class="row-box center countdown-smscode">
						<uni-countdown :start="codeStatus" :second="smsCodeTime" color="#ffffff" splitorColor="#ffffff" :font-size="14"
							:showDay="false" :showHour="false" :showMinute="false" :show-colon="false" @timeup="smsCodeTimeup"/>
						<text class="white" style="font-size: 14px;transform: translateX(-4rpx);">后</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-button-box">
			<view class="submit-button" :class="disable?'back-grey':'back-primary'" @click="submitHandle()">{{ type==1?'确认绑定':'修改绑定' }}</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from "vuex"
	export default {
		data() {
			return {
				fun: 1, // 功能 1-修改昵称 2=绑定手机号
				
				nickName: '', // 昵称
				
				type: 1, // 类别: 1=绑定手机，2=修改手机
				oldPhone: '', // 原来的手机号
				phone: '', // 手机号
				smsCode: '', // 验证码
				reg_phone: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,  // 手机号码正则
				codeStatus: false,  // 获取验证码状态
				smsCodeTime: 59,  // 验证码倒计时
			};
		},
		computed: {
			// 是否禁止提交
			disable() {
				if (!this.phone || !this.smsCode) {
					return true
				} else {
					return false
				}
			}
		},
		onLoad(options) {
			this.fun = Number(options.type)
			if (Number(options.type)==1) {
				this.nickName = options.nickName
			} else if (Number(options.type)==2) {
				if (options.phone) {
					this.oldPhone = options.phone?options.phone:''
					this.phone = options.phone?options.phone:''
					this.type = 2
				} else {
					this.type = 1
				}
			}
		},
		methods: {
			...mapMutations('m_user', ['updateNickName', 'updatePhone']),
			
			// 获取验证码
			getSmscode() {
				if(!this.phone) {
					return false
				} else if (!this.reg_phone.test(this.phone)) {
					return uni.showToast({
						icon: 'none',
						title: '手机号格式有误！'
					})
				}
				this.codeStatus = true
				this.$api.GetSmsCode({
					phone: this.oldPhone ? this.oldPhone : this.phone
				}).then(res => {
					console.log('GetSmsCode-success', res)
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '验证码已发送！'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('GetSmsCode-fail', err)
				})
			},
			
			// 验证码倒计时时间到触发事件
			smsCodeTimeup() {
				this.codeStatus = false
				this.smsCodeTime = 59
			},
			
			// 提交
			submitHandle() {
				switch (this.fun){
					case 1: // 昵称
						if (!this.nickName) {
							return false
						}
						this.$api.UpdateUserInfo({
							nickName: this.nickName
						}).then(res => {
							console.log('UpdateUserInfo-success', res)
							if (res.data.code == 200) {
								this.updateNickName(this.nickName)
								uni.navigateBack({
									delta: 1,
									success: () => {
										uni.showToast({
											icon: 'none',
											title: '修改成功！'
										})
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							}
						}).catch(err => {
							console.log('UpdateUserInfo-fail', err)
						})
						break;
					case 2: // 手机号
						if(!this.phone || !this.smsCode) {
							return false
						} else if (!this.reg_phone.test(this.phone)) {
							return uni.showToast({
								icon: 'none',
								title: '手机号格式有误！'
							})
						}
						this.$api.BindPhone({
							smsCode: this.smsCode,
							type: this.type,
							phone: this.oldPhone ? this.oldPhone : this.phone,
							newPhone: this.phone
						}).then(res => {
							console.log('BindPhone-success', res)
							if (res.data.code == 200) {
								this.updatePhone(this.phone)
								uni.navigateBack({
									delta: 1,
									success: () => {
										uni.showToast({
											icon: 'none',
											title: '绑定成功！'
										})
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							}
						}).catch(err => {
							console.log('BindPhone-fail', err)
						})
						break;
					default:
						break;
				}
			}
		},
	}
</script>

<style lang="scss">
	// 输入项
	.bor-b {
		border-bottom: 1rpx solid #f2f2f2;
	}
	// 验证码按钮
	.button-smscode {
		width: 120rpx;
		height: 56rpx;
		border-radius: 28rpx;
		&.back-grey {
			background: #cccccc;
		}
	}
	.countdown-smscode {
		width: 120rpx;
		height: 56rpx;
		border-radius: 28rpx;
		background: #cccccc;
		text-align: center;
		line-height: 56rpx;
	}
	// 提交按钮
	.submit-button {
		&.back-grey {
			background: #cccccc;
		}
	}
</style>
